<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/console1.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-form-select dl {
            max-height: 260px;
        }

        .layui-disabled {
            color: black !important;
        }

        .layui-form-item .layui-input-inline {
            width: 400px;
        }
        .layui-layer-loading .layui-layer-content {
            width: 238px;
            font-size: 18px;
            color: #795548;
        }
    </style>
</head>
<body class="pear-container" style="">
<form class="layui-form" action="" onsubmit="return false">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body" style="    display: flex;
    flex-direction: column;
    align-items: center;">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">档案名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="fileName" autocomplete="off" lay-verify="required"
                                   lay-reqtext="文件名称为必填项"
                                   placeholder="请输入文件名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">机柜编号</label>
                        <div class="layui-input-inline">
                            <select name="cabinetNumberId" lay-search lay-filter="cabinetNumber" lay-verify="required"
                                    lay-reqtext="机柜编号为必填项" id="cabinetNumber">
                                <option value="">请选择机柜</option>
                                <option th:each="map:${hostList}" th:value="${map.id}" th:text="${map.number}">
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">请选择位置</label>
                        <div class="layui-input-inline">
                            <select name="filePosition" lay-search lay-filter="filePositionSelect" id="filePositionSelect" lay-verify="required" lay-reqtext="箱门为必填项">
                                <option value="">请选择位置</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">档案简介</label>
                        <div class="layui-input-block">
                            <textarea name="profile" placeholder="请输入档案简介" class="layui-textarea"
                                      style="min-height: 65px!important;"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="manageSave">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:inline="javascript">
    var doorListMap = [[${doorListMap}]];
    var $ = layui.jquery;
    var cabinetNumber = null;
    //验证是否超过最大值
    function checkLayerVal() {
        let val = $("#layer").val();
        if (val > numberOfLayers) {
            val = numberOfLayers;
        } else if (val <= 1) {
            val = 1;
        }
        $("#layer").val(val);
    }

    //验证是否超过最大值
    function checkColumnVal() {
        let val = $("#column").val();
        if (val > numberOfColumns) {
            val = numberOfColumns;
        } else if (val <= 1) {
            val = 1;
        }
        $("#column").val(val);
    }

    layui.use(['form', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        var util = layui.util;


        // 机柜编号
        form.on('select(cabinetNumber)', function (data) {
            var value = data.value;
            cabinetNumber = value;
            $.get('/file/manage/get/column/number?cabinetNumberId='+value, function (result) {
                let insertHtml = '<option value="">请选择箱门编号</option>';
                for (filePosition in result.data) {
                    let fileStatus = result.data[filePosition]
                    if (fileStatus === 0) {
                        insertHtml += '<option value="' + filePosition + '" disabled>' + filePosition + '</option>';
                    } else {
                        insertHtml += '<option value="' + filePosition + '">' + filePosition + '</option>';
                    }
                }
                $("#filePositionSelect").html(insertHtml);
                form.render('select');
            })
        });
        // 单个文件定时器
        function fileTimer(paramsMap) {
            timerId = setInterval(function () {
                $.ajax({
                    url: '/file/manage/save/file/status',
                    data: JSON.stringify(paramsMap),
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    type: 'post',
                    success: function (result) {
                        if (result.code === 200) {
                            clearInterval(timerId); //清除计时器
                            layer.closeAll('loading');
                            layer.msg(result.message, {icon: 1, time: 3000}, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                                parent.layui.table.reload("valid");
                            });
                        }
                    }
                })
            }, 5000);
        }

        form.on('submit(manageSave)', function (data) {
            let loading = layer.load();
            $.ajax({
                url: '/file/manage/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 200) {
                        layer.load(2, {shade: [0.5,'#393D49'],content: '请前往柜体端将档案放入柜内'});
                        // 获取啥时候档案取走
                        fileTimer(result.data);
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000});
                    }
                }
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>
